import Watcher from './observer/watcher.js'
import { patch } from './vdom/patch.js';

//生命周期函数
export function lifecycleMixin(Vue) {
    //debugger
    Vue.prototype._update = function (vnode) {
        //将虚拟节点转化成真实节点
        //console.log('updat',vnode);
        const vm = this;
        //首次渲染用虚拟dom转成成真实dom元素
        //vm.$el=patch(vm.$options.el,vnode);
        //第一次初始化 第二次diff算法
        const prevVnode = vm._vnode;
        //保存上一次的虚拟节点
        vm._vnode = vnode;
        if (!prevVnode) {
            //1.第一次渲染完成后，拿到新的节点，下次再次渲染时替换上上次渲染的结果
            vm.$el = patch(vm.$el, vnode);//组件调用patch方法会产生$el属性
        } else {
            //diff算法
            vm.$el = patch(prevVnode, vnode);
        }






        //console.log(vm.$el);
    }
}

//发布调用生命周期钩子
export function callHook(vm, hook) {
    //获取vm身上的生命周期函数的数组集合
    const handles = vm.$options[hook];
    if (handles) {
        //遍历,执行,并且将this指向给当前这个实例,(这也是为什么生命周期函数不能箭头函数的愿意)
        handles.forEach(handler => handler.call(vm));
    }
}


//组件渲染函数
export function mountComponent(vm) {
    //console.log(vm,el);
    //默认Vue是通过watcher来进行渲染 = 这里的watcher指的是 渲染watcher(每一个组件都有一个渲染watcher)
    let updateComponent = () => {
        //vm._render()得到的是虚拟节点  vm._update将虚拟节点转化为真实节点
        vm._update(vm._render());
    }
    //相当于执行updateComponent()
    new Watcher(vm, updateComponent, () => { }, true)
}